import { AfterViewInit, Component,  OnDestroy, OnInit } from '@angular/core';
// import {enableProdMode} from '@angular/core';
// enableProdMode();
@Component({
  selector: 'app-chart-load-group',
  templateUrl: './chart-load-group.component.html',
  styleUrls: ['./chart-load-group.component.css']
})
export class ChartLoadGroupComponent implements OnInit {

  public dat = {
    installed:900,
    load:400
  };
  public chartOptions
  public data:any;
  public _chart: any;
  ngOnInit() {
    this.data=[
      { name: '装机容量', data: [{y:900,color:'#6c9de8'}]},
      { name: '实时负荷', data: [{y:400,color:'#ef953a'}]},
    ];
    this.fillChart(this.data);
  }
  public fillChart(data:any[]){

    let opts: any = {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'bar',
        backgroundColor: 'transparent',
        renderTo: ''
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: '',
      },
      tooltip: {
        valueSuffix: ' MW',
        positioner: function() {
          return {
            x: 20,
            y: 27
          }
        }
      },
      plotOptions: {
        series:  {
          dataLabels: {
            enabled: false,
          },
          pointPadding:0.2
        }
      },
      xAxis: {
        title: {
          text: ''
        },
        categories:[''],
        labels: {
          enabled: false
        },
        tickWidth: 0,
        gridLineWidth: 0,
        align: 'right',
        visible:false
      },
      yAxis: {
        title: {
          text: ''
        },
        categories:[''],
        labels: {
          enabled: false
        },
        tickWidth: 0,
        gridLineWidth: 0
      },
      series: data
    }
    this.chartOptions = opts
  }
}
